import React, { useState, useMemo } from "react";
// useMemo的语法和useCallBack完全相同

// useCallBack和useMemo的区别
// useCallBack是用来缓存函数的
// useMemo是用来缓存函数的返回值的

const App = () => {
  const [count, set_count] = useState(1);
  const fn1 = () => {
    set_count((v) => v + 1);
  };

  const [num, set_num] = useState(1);
  const fn2 = () => {
    set_num((v) => v + 1);
  };

  const sum = useMemo(() => {
    console.log(11111);
    let s = 0;
    for (let i = 0; i < count * 100; i++) {
      s += i;
    }
    return s;
  }, [count]);

  const [arr] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9]);
  const arr2 = useMemo(() => {
    console.log(999);
    return arr.filter((item) => item % 2);
  }, [arr]);

  return (
    <>
      <h3>useMemo</h3>
      <p>count: {count}</p>
      <button onClick={fn1}>+</button>
      <p>num: {num}</p>
      <button onClick={fn2}>+</button>
      <p>{sum}</p>

      <ul>
        {arr2.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
};

export default App;
